<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>吸顶灯实现</title>
		<style>
			*{
				padding: 0;
				margin: 0;
			}
			/*顶部效果*/
			#top_content{
				height: 200px;
				line-height: 200px;
				text-align: center;
				background-color: #eee;
			}
			/*吸顶灯效果：默认效果*/
			#sticky{
				height: 50px;
				background-color: #333;
				line-height: 50px;
				text-align: center;
				color: #fff;
			}
			/*页面主区域*/
			#main_content{
				height: 8000px;
				background-color: #eee;
			}
			/*吸顶灯效果：定死页面顶部效果*/
			.ac{
				position: fixed;
				top: 0;
				width: 100%;
			}
		</style>
		<script src="js/jquery-1.11.1.js"></script>
		<script>
			$(function(){
				//JQ相关操作   思路：滚动下拉条，超过200px，吸顶灯定死页面上
				//超过200px    固定>滚动  吸顶灯通过添加样式操作：定死页面上
				//①固定值：获取到达吸顶灯位置的偏移量
				//offset()  获取或者设置元素相对于文档偏移量
				//.top，获取body顶部
				var so=$("#sticky").offset().top;
				//$(Window) 来监听窗口的事件：滚动、窗口视图大小
				//scroll()  监听页面滚动事件
				$(window).scroll(function(){
					
					//②获取页面滚动值：动态值   scrollTop()获取滚动位置【动态值】
					var st=$(window).scrollTop();
					//超过200px：动态值>固定值200  条件满足：页面吸顶灯样式定死
					if(st>so){
						$("#sticky").addClass("ac");
					}else{
						$("#sticky").removeClass("ac");
					}
				});
			});
		</script>
	</head>
	<body>
		<div id="top_content">顶部内容区域</div>
		<div id="sticky">我是吸顶灯元素区域</div>
		<div id="main_content">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Adipisci fuga veniam, nam iure aspernatur quasi molestias nemo repellendus dolores asperiores incidunt, voluptatum ipsum voluptate, provident ducimus quam laborum quia officia?
			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto ullam illo ab repellendus quidem qui est voluptate necessitatibus earum natus repellat, molestias ducimus veniam tenetur itaque nobis aperiam voluptas odit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto, praesentium. 
			Aperiam laudantium fugiat officia architecto magni, iusto nesciunt repellat sit accusantium obcaecati eum nihil reprehenderit voluptates, assumenda velit in cumque? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nesciunt accusantium ex corrupti nostrum, minima ad explicabo in, quam facilis perspiciatis commodi eaque quibusdam. Ea, sequi sed voluptatibus repudiandae quasi accusantium!</div>
	</body>
</html>